import { mapMutations, mapState } from "vuex";
import { submitInfo } from "@/assets/js/api";

import scroll from "scroll";
import page from "scroll-doc";
import ease from "ease-component";


export const MobileMixin = {
    data() {
        return {
            errText: "",
            mobile: "",
            valid: false,
            disabled: false,
            placeholder: "手机号码"
        };
    },
    created() {
        // this.submitAnswer();
    },
    mounted() {
        window.scrollTo(0, 0);
        // this.changeOver();
    },
    computed: {
        ...mapState({
            answers: state => state.answers
        })
    },
    methods: {
        ...mapMutations({
            changeOver: "changeOver",
            changeMobile: "changeMobile"
        }),
        focus() {
            this.placeholder = "";
            if (/Android [4-9]/.test(navigator.appVersion)) {
                window.addEventListener("resize", function () {
                    if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
                        window.setTimeout(function () {
                            document.activeElement.scrollIntoViewIfNeeded();
                        }, 0);
                    }
                })
                let h = document.documentElement.clientHeight
                scroll.top(page(), h, { ease: ease.linear, duration: 200 }, function () { });
            }

        },
        submitAnswer() {
            submitInfo({ answers: this.answers });
        },
        isNull: function (value) {
            //验证是否为空
            if (value == null || value == "" || !/\s/.test(value)) {
                return true;
            }
            return false;
        },
        blur() {
            if (this.isNull(this.mobile)) {
                this.placeholder = "手机号码";
            }
        },
        submit() {
            this.changeMobile(this.mobile);
            this.disabled = true;
            // setTimeout(() => {
            const datas = {
                mobile: this.mobile,
                surveyInfo: [
                    {
                        surveyId: 1,
                        questionId: 1,
                        optionIds: this.answers.answer1
                    },
                    {
                        surveyId: 1,
                        questionId: 2,
                        optionIds: this.answers.answer2.sort()
                    },
                    {
                        surveyId: 1,
                        questionId: 3,
                        optionIds: this.answers.answer3.sort()
                    }
                ]
            };
            submitInfo(datas).then(res => {
                console.log(res)
                if (res.data.code === 0) {

                    setTimeout(() => {
                        console.log(11)
                        this.disabled = false;
                        // location.href = "/MP-Survey/index.html#/thank";
                        location.href = "/chanel/MP-Survey/index.html#/thank";
                        // this.$router.push("/thank");

                    }, 500)

                }
            });

            // });
        }
    },
    watch: {
        mobile(newVal, oldVal) {
            this.errText = "";
            if (/[^\d]/.test(newVal)) {
                this.valid = false;
                this.errText = "手机号码有误，请重新输入";
            }
            if (newVal.length > 11) {
                this.mobile = oldVal
            }
            if (newVal.length === 11) {
                if (/^1[3456789]\d{9}$/.test(newVal)) {
                    this.valid = true;
                } else {
                    this.valid = false;
                    this.errText = "手机号码有误，请重新输入";
                }
            } else {
                this.valid = false;
            }
        }
    }
}